axios.defaults.baseURL = 'http://ajax-api.itheima.net'
const list = document.querySelector('.top')
async function aa() {
  const { data: res } = await axios({
    url: '/api/category/top',
    method: 'GET'
  })
 const arr=  res.data.map(item => {
    return axios({
      method: 'GET',
      url: "/api/category/sub?id="+item.id,
    })
  })
 const arrArr=await Promise.all(arr);
 const html= arrArr.map(({data:item})=>{
  console.log(item);
  return `<li>
  <a href="javascript:;">${item.data.name}</a>
  <ul class="sub">
    ${item.data.children.map((item)=>{
      return ` <li>
      <a href="javascript:;">
        <span>${item.name}</span>
        <img src="${item.picture}" alt="">
      </a>
    </li>`
    }).join('')}
  </ul>
</li>`
 }).join('')
 list.innerHTML=html
}
aa()